<template>
  <div class="subject-right">
    <div class="subject-right-header">
      <div class="resourceTop">
        <div class="logo">
          <img src="@/assets/img/kechengziyuan.png" alt="" />
        </div>
        <div class="text">
          <p class="title007">班级信息</p>
          <p>
            <span>共&nbsp;{{ classNum }}&nbsp;个班级</span>
          </p>
        </div>
        <div class="nav-right">
          <el-button size="large" round @click="open" color="#FF6B0F" style="color: #fff">创建班级</el-button>
          <div class="search">
            <div class="sousuo">
              <el-icon>
                <Search />
              </el-icon>
            </div>
            <input type="text" placeholder="搜索想要查找的班级名称" @input="search" v-model="searchText" />
          </div>
        </div>
      </div>
    </div>
    <div class="subject-right-body">
      <div class="table">
        <el-table :data="tableData" height="74vh" style="width: 100%" empty-text="当前没有班级" @row-click="acs"
          :row-style="{ height: '80px' }">
          <el-table-column prop="className" label="班级名称" align="center" />
          <el-table-column prop="createName" label="创建者" align="center" />
          <el-table-column prop="studentNum" label="学员数量" align="center" sortable />
          <el-table-column prop="courseNum" label="课程数量" align="center" sortable />
          <el-table-column prop="id" label="管理" align="center">
            <el-tooltip content="修改班级名称" placement="left">
              <el-button type="info" size="mini" round @click="lock = '修改'" :icon="Edit" />
            </el-tooltip>
            <el-tooltip content="删除当前班级" placement="right">
              <el-button type="danger" size="mini" round @click="lock = '删除'" :icon="Delete" />
            </el-tooltip>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { dataType } from "element-plus/es/components/table-v2/src/common";
import router from "@/router";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  ArrowLeft,
  ArrowRight,
  Delete,
  Edit,
  Share,
  Search,
} from "@element-plus/icons-vue";
import {
  insterClass,
  findClassroomByTeacherId,
  deleteClass,
  updateClass,
  findClassroomByClassId,
} from "@/api/teacher/AddClass";
const classNum = ref(0);
//获取班级信息
const getClassroomByTeacherId = async () => {
  let res = await findClassroomByTeacherId();
  tableData.value = res.data;
  classNum.value = res.data.length;
};
getClassroomByTeacherId();

//当前操作的id
const classId = ref();
//操作锁
const lock = ref("跳转");
const acs = (row) => {
  classId.value = row.id;
  if (lock.value == "跳转") {
    //alert("跳转页面=" + classId.value);
    router.push({
      path: "/course/AddStudent",
      query: {
        classId: classId.value,
      },
    });
  }
  if (lock.value == "修改") {
    update(row.className, classId.value);

  }
  if (lock.value == "删除") {
    if (row.courseNum > 0 || row.studentNum > 0) {
      ElMessageBox.alert("该班级下有课程或学员，无法删除", "提示", {
        confirmButtonText: "确定",
        type: "warning",
      });
    } else {
      del();
    }

  }
  lock.value = "跳转";
};
//班级列表模型
const tableData = ref([]);
//创建班级
const addClass = async (value) => {
  await insterClass(value);
  getClassroomByTeacherId();
};
//删除班级
const del = () => {
  ElMessageBox.confirm("是否删除该班级", "删除班级", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      godel(classId.value);
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};
const godel = async (classId) => {
  await deleteClass(classId);
  getClassroomByTeacherId();
};
//添加班级
const open = () => {
  ElMessageBox.prompt("班级名称", "创建班级", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputPattern: /^.+$/,
    inputErrorMessage: "未输入班级名称",
    inputPlaceholder: "输入班级名称",
  })
    .then(({ value }) => {
      addClass(value);
      ElMessage({
        type: "success",
        message: `添加了班级:${value}`,
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消创建班级",
      });
    });
};

//修改班级名称
const update = (className, classId) => {
  ElMessageBox.prompt("班级名称", "修改班级", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputPattern: /^.+$/,
    inputErrorMessage: "未输入班级名称",
    inputPlaceholder: "输入班级名称",
    inputValue: className,
  })
    .then(async ({ value }) => {
      await updateClass(classId, value);
      getClassroomByTeacherId();
      ElMessage({
        type: "success",
        message: `修改了班级:${value}`,
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消修改",
      });
    });
};

//搜索班级
const searchText = ref();
const search = async () => {
  let res = await findClassroomByClassId(searchText.value);
  tableData.value = res.data;
};
</script>

<style scoped lang="scss">
@import url(@/assets/font/iconfont.css);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

.resourceTop {
  width: 100%;
  height: 100px;
  background-color: white;
  border: 1px solid #f0f0f0;
  padding: 16px 60px;
}

.resourceTop .logo {
  width: 60px;
  height: 60px;
  background-color: #ff6b0f;
  border-radius: 50%;
  display: inline-block;
  justify-content: center;
  align-items: center;
}

.resourceTop .logo img {
  width: 60px;
  height: 60px;
  padding: 18px;
}

.resourceTop .text {
  width: 120px;
  height: 100%;
  margin-left: 20px;
  display: inline-block;
}

.resourceTop .text .title007 {
  font-size: 22px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 10px;
}

.resourceTop .text p span {
  color: rgba(0, 0, 0, 0.45);
}

.resourceTop .text p a {
  color: #f4523b;
}

.search {
  display: flex;
  float: right;
  border-radius: 2px;
  background-color: #fafafa;
  border: 1px solid #f0f0f0;
}

.sousuo {
  width: 40px;
  height: 40px;
  padding: 11px;
  background-color: #fff;
}

.resourceTop .search input {
  width: 320px;
  height: 40px;
  border: none;
  background-color: #fff;
}

.search input:focus {
  outline: none;
}

.search:hover {
  border: 1px solid #FF6B0F;
}

.nav-right {
  float: right;
  width: 500px;
  height: 100%;
  padding: 14px 0;
}

.subject-right-header {
  width: 100%;
}

.subject-right-body {
  background-color: #eeeeee;
  height: 78.5vh;
  width: 99.9%;
  padding: 24px 60px;
}

.table {
  height: 100px;
  width: 100%;
}

::v-deep .el-table tr:hover {
  cursor: pointer;
}
</style>
